<template>
  <div class="homeMessage">
    <div v-preview="store.getGetPreviewImg()" v-origin="bg"></div>
    <div class="addMeassage">
      <h5>留言板</h5>
      <input placeholder="来了就说点什么" type="text" class="input" required v-model.trim="message" @keyup.enter="addMessage" />
      <button @click="addMessage">
        发送
      </button>
    </div>
    <vue-danmaku v-model:danmus="danmus" :loop='true' :fontSize="25" :channels='0' ref="danmakuRef" :isSuspend="true"
      :speeds="250" :randomChannel="true" style="height:100%;width:100%; color:#fff">
    </vue-danmaku>
  </div>
</template>

<script setup lang="ts">
import { postMessage, getMessage } from '@/utils/http/message'
import { ElMessage } from 'element-plus';
import { ref, inject, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import vueDanmaku from 'vue3-danmaku'
const store: any = inject('store')
const router = useRouter()
const message = ref<string>('')
const bg = ref('https://w.wallhaven.cc/full/we/wallhaven-weeqzx.jpg')

bg.value = store.state.BaseUrl + 'frontUploads/messageImage.jpg'
let timer: NodeJS.Timeout | null = null
// 添加message
const danmus = ref<string[]>([])
const addMessage = async () => {
  if (!store.state.userBase.username) return router.push('/login')
  if (!message.value) return ElMessage.error('不能为空')
  if (timer) return ElMessage.error('30s内只能留言一次哦')
  let res = await postMessage(message.value, store.state.userBase.username, store.state.userBase.email)
  danmus.value.push(message.value)
  message.value = ''
  timer = setTimeout(() => {
    timer = null
  }, 30000);
}
const danmakuRef = ref<InstanceType<typeof vueDanmaku>>()
onMounted(() => {
  // 请求数据
  danmakuRef.value && danmakuRef.value.show()
  getMessage().then(res => {
    danmus.value.push(...res.data.inof.data.map((item: { message: string }) => item.message))
    danmakuRef.value && danmakuRef.value.play()
  })
})
</script>
<style>
.dm {
  color: #fff !important;
}
</style>

<style lang="scss" scoped>
.homeMessage {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #2b2b2b;
  z-index: -2;

  :deep(.v-progressive-image) {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;

    .pi-origin,
    .pi-preview {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .addMeassage {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);

    h5 {
      position: absolute;
      width: 100%;
      top: -150px;
      color: #fff;
      font-size: 35px;
      text-align: center;
      letter-spacing: 5px;
      // padding-left: 50px;
    }

    button {
      position: absolute;
      right: -70px;
      top: 10px;
      width: 60px;
      background-color: #f2f2f2;
      color: #888;
      border-radius: 10em;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 8px;
      cursor: pointer;
      transition: all 0.1s ease-in-out;
      border: 1px solid #888;
      transform: translateY(-4px) translateX(-2px);
      box-shadow: 2px 5px 0 0 black;
    }

    button:active {
      transform: translateY(3px) translateX(3px);
      box-shadow: 0 0 black;
    }
  }

  /* From uiverse.io by @alexruix */
  .input {
    width: 200px;
    line-height: 28px;
    border: 2px solid transparent;
    border-bottom-color: #fff;
    padding: 0.2rem 0;
    outline: none;
    background-color: transparent;
    color: #fff;
    transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .input:focus,
  input:hover {
    outline: none;
    padding: 0.2rem 1rem;
    border-radius: 1rem;
    border-color: #7a9cc6;
  }

  .input::placeholder {
    color: #f2f2f2;
    // font-size: 16px;
  }

  .input:focus::placeholder {
    opacity: 0;
    transition: opacity 0.3s;
  }
}
</style>
